<script setup lang="ts">
import { onMounted } from 'vue'
import { getDiskInfo } from '@/api/disk'
import DiskInfoItem from './DiskInfoItem.vue'
import { useDataFetching } from '@/utils/dataFetching'

const {
  data: diskInfos,
  loading,
  error,
  fetchData,
} = useDataFetching(getDiskInfo, '获取磁盘信息失败')

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="disk-info-container">
    <h2 class="disk-info-header">磁盘信息</h2>

    <div v-if="loading">加载中...</div>

    <div v-else-if="error">{{ error }}</div>

    <div v-else>
      <div class="disk-info-grid">
        <DiskInfoItem v-for="diskInfo in diskInfos" :key="diskInfo.name" :disk-info="diskInfo" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/disk-info.scss';
</style>
